<!--**
  *@info 号码滚动组件
  *@author: thinkmix
* *-->
<template>
  <section>
    <div
      v-show="showList"
      ref="scrollBox"
      @scroll="onScroll"
      :style="scrollBoxStyle"
      class="f-scroll"
    >
      <!--号码-->
      <ul class="m-number-ul">
        <li v-for="(todo, index) in list_" :key="index" @click="todoClick(todo)">
          <div class="inner" :class="setNumberTag(todo)">
            <div class="number black">{{ phoneFormat(todo.phoneNum) }}</div>
            <div class="dp f-flex" v-if="todo.quanyiType != 1">
              <div class="city grey">{{ todo.cityName }}</div>
              <div class="auto" v-html="setNumberMoney(todo)"></div>
            </div>
            <div class="m-status f-flex mid">
              <div class="auto" v-html="setNumberStatus(todo.phoneStatus)"></div>
              <div class="tag bgRed" v-if="todo.quanyiType==1">吃鸡神卡</div>
            </div>
          </div>
        </li>
      </ul>
      <!--填充提示-->
      <div class="f-ptb-10 f-tac f-fs-12 grey f-line-btm" v-if="showOtherTips">
        <em v-if="list_.length">搜索结果有点少</em>
        <em v-else>暂无相关搜索结果</em>
        <em>，别着急下面有您喜欢的哦~</em>
      </div>
      <!--填充号码-->
      <ul class="m-number-ul">
        <li v-for="(todo, index) in otherList_" :key="index" @click="todoClick(todo)">
          <div class="inner" :class="setNumberTag(todo)">
            <div class="number black">{{ phoneFormat(todo.phoneNum) }}</div>
            <div class="dp f-flex" v-if="todo.quanyiType != 1">
              <div class="city grey">{{ todo.cityName }}</div>
              <div class="auto" v-html="setNumberMoney(todo)"></div>
            </div>
            <div class="m-status f-flex mid">
              <div class="auto" v-html="setNumberStatus(todo.phoneStatus)"></div>
              <div class="tag bgRed white" v-if="todo.quanyiType==1">吃鸡神卡</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--加载-->
    <div v-if="isScroll" class="m-dragup-loading">
      <span class="u-icon-loading"></span>
      <span class="text">加载中</span>
    </div>
    <!--墓碑-->
    <dl class="m-number-tombstone" v-if="firstLoad">
      <dd v-for="i in pageSize" :key="i">
        <div></div>
      </dd>
    </dl>
    <!--无数据提示-->
    <div class="f-no-data" v-if="!showList && !firstLoad">
      <img src="~@/assets/img/result/no_data.png" alt />
      <div>
        暂无符合您搜索条件的号码
        <br />您可以更改搜索条件或查询尾号来获取更多号码
      </div>
    </div>
    <div class="f-no-more" v-show="isNoMore">暂无更多</div>
  </section>
</template>
<script>
import { getOrderGetAndAbandonUrl, orderInit } from '@/utils/orderUtils';

export default {
  name: 'numberScroll',
  props: {
    // 滚动盒样式
    scrollBoxStyle: {
      default: 'height:auto;',
      type: String
    },
    // 用户信息
    userInfo: {
      default () {
        return {}
      },
      type: Array
    },
    // 列表
    list: {
      default () {
        return []
      },
      type: Array
    },
    // 填充列表
    otherList: {
      default () {
        return []
      },
      type: Array
    },
    // 业务类型
    businessType: {
      default: 'CARD', // CARD开空卡,OPEN_CHENG开成卡,OPEN_WHITE开白卡,MAKE_CHENG制成卡,MAKE_WHITE制白卡
      type: String
    },
    page: Number,
    pageSize: Number,
    //权益套餐code
    quanyiCode: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      scrollBoxStyle: '',
      isScroll: false,
      firstLoad: true,
      list_: [],
      otherList_: [],
      stepCode: '1000', // 是否是设备SDK
    }
  },
  computed: {
    showList () {
      return !!(this.list_.length || this.otherList_.length);
    },
    showOtherTips () {
      return !!this.otherList.length;
    },
    isNoMore () {
      return this.page !== 1 && !this.list.length && !this.otherList.length
    }
  },
  watch: {
    'otherList' () {
      this.otherList_ = this.otherList_.concat(this.otherList);
    },
    'list' () {
      this.list_ = this.list_.concat(this.list);
    }
  },
  created () {
    this.stepCode = this.isDeviceSdk ? '999' : '1000';
    this.requestUrl = getOrderGetAndAbandonUrl(this.businessType)
  },
  methods: {
    onScroll (e) {
      e.preventDefault();

      let page = this.page, scrollBoxCase = this.$refs.scrollBox;

      if (
        !this.isScroll &&
        scrollBoxCase.scrollHeight <= (scrollBoxCase.scrollTop + scrollBoxCase.offsetHeight) &&
        !this.isNoMore
      ) {
        this.isScroll = true;
        page++;

        this.$emit('on-scroll', page);
      } else {
        this.isNoMore = false;
      }
    },
    loadingFinished (page) {
      this.firstLoad = false;
      this.isScroll = false;

      if (page === 1) {
        let scrollBoxCase = this.$refs.scrollBox;

        if (scrollBoxCase) scrollBoxCase.scrollTop = 0;

        this.list_ = [];
        this.otherList_ = [];
      }
    },
    todoClick ({ phoneNum, cityName, phoneType, phoneStatus, belongType, initialMoney, faceMoney, quanyiType }) {
      const vm = this;

      let formtaNumber = this.phoneFormat(phoneNum);

      if (phoneStatus == 1) {
        this.errorBubble(`${formtaNumber} 该号码，正在被其它用户开卡中`)
      } else if (phoneStatus == 2) {
        this.errorBubble(`${formtaNumber} 该号码，已售出`)
      } else if (phoneStatus == 3) {
        this.errorBubble(`${formtaNumber} 该号码，已被其它用户占用中`)
      } else if (phoneStatus == 4) {
        this.errorBubble(`${formtaNumber} 该号码即将上架，请您随时关注。`)
      } else if (belongType == 1) {
        Jsborya.pageJump({
          url: '../../km/reserve/reserveDetails.html?backUrl=search',
          stepCode: '999',
          depiction: '预占详情',
        });
      } else {
        vm.setStore('SELECT_INFO', {
          card: phoneNum,
          cityName,
          phoneType,
          initialMoney,
          faceMoney,
          quanyiType,
          // 开白卡参数
          sourceOrder: vm.getUrlParam('sourceOrder') || '',
          iccidReadType: vm.getUrlParam('iccidReadType') || undefined // 设置undefined以在没值时不传递该参数
        });

        vm.AJAX(vm.requestUrl.get, { userInfo: vm.userInfo }, function (res) {
          if (res && res.data) {
            vm.$emit('show-order', res.data);
          } else {
            // 订单初始化
            orderInit(vm);

            if (!vm.quanyiCode) vm.removeStore('CHANGE_PACKAGE_INFO');

            if (vm.businessType === 'CARD') {
              vm.cardJumpDeal(phoneType, belongType);
            } if (vm.businessType === 'OPEN_CHENG') {
              vm.openChengJumpDeal(belongType);
            } if (vm.businessType === 'OPEN_WHITE') {
              vm.openWhiteJumpDeal(belongType);
            } else if (vm.businessType === 'MAKE_CHENG') {
              vm.makeChengJumpDeal(belongType);
            } else if (vm.businessType === 'MAKE_WHITE') {
              vm.makeWhiteJumpDeal(belongType);
            }

          }
        });
      }
    },
    // 开空卡跳转处理
    cardJumpDeal (phoneType, belongType) {
      const vm = this;

      let url = '../card/yuantelPackage.html';

      if (phoneType == 2) {
        url = '../card/unicomPackage.html';
      } else if (belongType == 2 || belongType == 3) {
        url = '../card/devotedPackage.html'
      } else if (vm.quanyiCode) {//选择权益套餐
        url = '../card/quanyiPackage.html';
      }

      Jsborya.pageJump({
        url: url,
        stepCode: vm.stepCode,
        depiction: "选择套餐",
        data: {
          bizType: '6',
          cardType: phoneType,
          orderStatusCode: 1000
        }
      });
    },
    // 开成卡跳转
    openChengJumpDeal (belongType) {

    },
    // 开白卡跳转
    openWhiteJumpDeal (belongType) {
      Jsborya.pageJump({
        url: belongType == 0 ? '../active/publicWhitePackage.html' : '../active/devotedWhitePackage.html',
        stepCode: this.stepCode,
        depiction: "开白卡",
        destroyed: false,
        data: {
          bizType: '5',
          cardType: 1,
          orderStatusCode: 1000
        }
      });
    },
    // 制成卡跳转
    makeChengJumpDeal (belongType) {
      let url = '';
      //0普通号码1预占号2专营号3预存号
      if (belongType == 0) {
        url = '../make/publicChengCardPackage.html';
      } else if (belongType == 2) {
        url = '../make/devotedChengPackage.html?orderType=2';
      } else if (belongType == 3) {
        url = '../make/devotedChengPackage.html?orderType=1';
      }

      Jsborya.pageJump({
        url: url,
        stepCode: this.stepCode,
        depiction: '套餐选择',
        data: {
          bizType: '10',
          cardType: 1,
          orderStatusCode: 1000
        }
      });
    },
    // 制白卡跳转
    makeWhiteJumpDeal (belongType) {

    },
    // 设置号码状态
    setNumberStatus (phoneStatus) {
      let temp = '';

      switch (parseInt(phoneStatus) || 0) {
        case 1: temp = '正在开卡中';
          break;
        case 2: temp = '已售出';
          break;
        case 3: temp = '被他人预占';
          break;
        default: temp = '';
          break;
      }

      return temp ? `<span class="tag yellow">${temp}</span>` : ''
    },
    // 设置号码价格
    setNumberMoney ({ phoneStatus, initialMoney, faceMoney, belongType }) {

      if (phoneStatus == 2 || phoneStatus == 4) {
        return '';
      } else {
        let dom = '';

        if (belongType == 2 || belongType == 3) {
          dom = `<span class="red-lt">${
            parseInt(initialMoney) / 100
            }卡</span>`;
        } else {
          if (initialMoney != faceMoney) {
            dom = `<span class="f-tdl-old">${
              parseInt(initialMoney) / 100
              }元</span>`
          }
          dom += `<span class="red-lt">${
            parseInt(faceMoney) / 100
            }元</span>`;
        }

        return dom;
      }
    },
    // 设置号码标签
    setNumberTag ({ pretty, belongType, phoneStatus, initialMoney, faceMoney }) {
      let classArr = [];

      if (pretty == 1) {
        classArr.push('pretty');
      }

      if (belongType == 1) { // 预占号码
        classArr.push('ocuppy');
      } else if (belongType == 2) { // 专营号码
        classArr.push('devoted');
      } else if (belongType == 3) { // 预存号码
        classArr.push('prestore');
      }

      if (phoneStatus == 4) {
        classArr.push('presell');
      } else if (phoneStatus == 5) { // 活动号码
        if (initialMoney == faceMoney || (belongType == 2 || belongType == 3) // 大众预存卡直接显示抢
        ) {
          classArr.push('act');
        } else {
          classArr.push('discount');
        }
      }

      return classArr.join(' ');
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/drag-up.scss";
@import "~@/assets/css/number-tombstone.scss";
@import "~@/assets/css/number.css";
</style>
